<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        过渡transition 需要添加事件
        动画animation 可以添加到事件里，也可以不添加到事件 可以实现帧动画
            语法：
                1，创建动画
                    a, @keyframes 自己取的动画名字{
                         from{
                            开始的状态
                            自己修改的代码
                        }
                        to{
                            结束的状态
                            自己修改的代码
                        }
                     }
                 b，关键帧动画
                    @keyframes 自己取的动画名字{
                            0%{
                                开始的状态
                                自己修改的代码
                            }
                            50%{
                                自己修改的代码  
                            }
                            ....
                            100%{
                                结束的状态
                                自己修改的代码
                            }
                        }

                animation 动画的绑定
                    animation-name: donghua; 动画的名字 自己取的名字
                    animation-duration 动画的时间  s
                    animation-iteration-count: 动画循环的次数  
                        动画循环的次数：可以是数字或者infinite（无限循环）;
                        
                animation和transition的区别 记
     -->
     <style>
         div{
             width:200px; height:200px;
             background: red;
             /* animation: donghua 2s; */
             /* animation-name: donghua;
             animation-duration: 2s; */
             /* animation-delay: 2s; */
             /* animation-timing-function: linear;
             animation-iteration-count: infinite;
            animation-direction: alternate-reverse; */
            animation: donghua 2s linear infinite;
 
         }
         div:hover{
            animation-play-state: paused;
         }
       
         @keyframes donghua{
             0%{
                width:200px;
                background: red;
                /* 开始 */
             }
           
             100%{
                width:600px;
                background: yellow;
                /* 结束的 */
             }
         }
     </style>
</head>
<body>
    <div></div>
    <p></p>
</body>
</html>